<template>
  <div class="tab-content">
    <div class="line">
      <div class="left">
        按现有数据
        <van-icon name="arrow-down" />
      </div>
      <div class="right">
        <div class="button" :class="{ active: active === 0 }" @click="active = 0">占比</div>
        <div class="button" :class="{ active: active === 1 }" @click="active = 1">排名</div>
      </div>
    </div>
    <div class="echarts-box" v-show="active === 0">
      <div id="echarts1"></div>
    </div>
    <div class="rank-list" v-show="active === 1">
      <div class="item" v-for="(item, index) in dataSort" :key="item.hangye">
        <div class="name">第{{ index + 1 }}名 {{ item.hangye }}</div>
        <div class="data">
          <div class="line line1" :style="{ width: item.width + '%' }"></div>
          <p class="text">{{ item.total }}条</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'industryAnalysis',
  props: {
    tabData: Array,
  },
  watch: {
    tabData: {
      handler(val) {
        if (val) {
          this.initEcharts()
        }
      },
    },
  },
  data() {
    return {
      active: 0,
      myEcharts: '',
    }
  },
  computed: {
    dataSort() {
      if (this.tabData && this.tabData.length > 0) {
        const arr = this.tabData.sort((a, b) => {
          return b.total - a.total
        })
        const max = arr[0].total
        arr.forEach((item) => {
          item.width = ((item.total / max) * 100).toFixed(2)
        })
        return arr
      } else {
        return []
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    initEcharts() {
      const echartsData = this.tabData.map((item) => {
        return {
          name: item.hangye,
          value: item.total,
        }
      })
      this.myEcharts = echarts.init(document.getElementById('echarts1'))
      var option = {
        tooltip: {},
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            color: ['#409eff', '#67c23a', '#e6a23c', '#F56C6C', '#7cb4cc', '#71669e', '#4ea397', '#cc70af'],
            data: echartsData,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.setOption(option)
    },
  },
}
</script>

<style scoped lang="scss">
.tab-content {
  width: 100%;
  padding: 30rpx 24rpx;
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #409eff;
      border-radius: 6rpx;
      .button {
        width: 80rpx;
        height: 46rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &.active {
          background: #409eff;
          color: #ffffff;
        }
      }
    }
  }
}

#echarts1 {
  width: 100%;
  height: 800rpx;
}

.rank-list {
  margin-top: 20rpx;
  width: 100%;
  .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 30rpx;
    .name {
      width: 100%;
    }
    .data {
      margin-top: 6rpx;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .line {
        height: 36rpx;
        border-radius: 0 14rpx 14rpx 0;
      }
      .line1 {
        background: #409eff;
      }
      .text {
        color: #409eff;
        flex: 0 0 auto;
        margin: 0;
        margin-left: 20rpx;
      }
    }
  }
}
</style>
